{% extends "base.html" %}
{% load static %}

<!DOCTYPE html>
{% block nav %}
<div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
        <a class="navbar-brand" href="{% url 'yaksh:index' %}">
        <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown my-lg-0" style="font-size: 1.2rem">
                <a class="dropdown-toggle nav-link" id="user_dropdown" data-toggle="dropdown" href="#">{{user.get_full_name|title}}
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="{% url 'yaksh:edit_profile' %}">
                    <i class="fa fa-user"></i>  My Profile
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'password_change' %}">
                    <i class="fa fa-key"></i> Change Password
                </a>
                <div class="dropdown-divider"></div>
                    <a class="dropdown-item" id="user_logout" href="{% url 'yaksh:logout' %}">
                        <i class="fa fa-sign-out"></i> Logout
                    </a>
                </div>
            </li>
        </ul>
        </div>
    </nav>
</div>
{% endblock %}
{% block pagetitle %}
Change Password
{% endblock %}
{% block title %} Change Password {% endblock %}
{% block script %}
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#id_old_password").addClass("form-control");
        $("#id_new_password1").addClass("form-control");
        $("#id_new_password2").addClass("form-control");
    });
</script>
{% endblock %}

{% block content %}
<form action="" method="post" >
    {% csrf_token %}
    <center>
        <div class="container col-md-6">
            <table class="table table-responsive-sm">
                {% if form.errors %}
                    {% for field in form %}
                        {% for error in field.errors %}
                            <div class="alert alert-dismissible alert-danger">
                                <button type="button" class="close" data-dismiss="alert">
                                    <i class="fa fa-close"></i>
                                </button>
                                <strong>{{ error|escape }}</strong>
                            </div>
                        {% endfor %}
                    {% endfor %}
                    {% for error in form.non_field_errors %}
                        <div class="alert alert-dismissible alert-danger">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="fa fa-close"></i>
                            </button>
                            <strong>{{ error|escape }}</strong>
                        </div>
                    {% endfor %}
                {% endif %}
                {% for field in form %}
                    <tr>
                        <td>{{ field.label }}</td>
                        <td>{{ field }} <small>{{ field.help_text }}</small></td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </center>
    <br>
    <center>
        <button class="btn btn-success btn-lg" type="submit">
            Change
        </button>
        <a href="{% url 'yaksh:index' %}" class="btn btn-primary btn-lg">
            Cancel
        </a>
    </center>
</form>
{% endblock content %}
